<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>双色表格</title>
    <style type="text/css">
        h1 {
            color: #063;
            font-weight: bold;
            font-family: "黑体";
            text-align: center;
        }
        
        .datalist {
            border: 1px solid #007108;
            background-color: #d9ffdc;
            font-size: 14px;
            border-collapse: collapse;
            width: 800px;
            margin: 0px auto;
        }
        
        .datalist td {
            border: 1px solid #007108;
            text-align: center;
            line-height: 20px;
            padding: 4px 10px;
        }
    </style>
</head>

<body>
    <h1>学生信息表</h1>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="datalist">
        <tr>
            <td><input type="checkbox" /></td>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>电话号码</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141201</td>
            <td>陈奕炫</td>
            <td>男</td>
            <td>18</td>
            <td>13882424456</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141202</td>
            <td>李伟涛</td>
            <td>男</td>
            <td>19</td>
            <td>13882424457</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141203</td>
            <td>卢志宏</td>
            <td>男</td>
            <td>18</td>
            <td>13882424461</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141204</td>
            <td>马晓松</td>
            <td>男</td>
            <td>17</td>
            <td>13882424458</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141205</td>
            <td>朱俊亮</td>
            <td>男</td>
            <td>18</td>
            <td>13882424459</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141206</td>
            <td>范汉华</td>
            <td>男</td>
            <td>19</td>
            <td>13882424460</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141207</td>
            <td>陈荣辉</td>
            <td>男</td>
            <td>18</td>
            <td>13882424461</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141208</td>
            <td>吴家良</td>
            <td>男</td>
            <td>18</td>
            <td>13882424462</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141209</td>
            <td>张安享</td>
            <td>男</td>
            <td>19</td>
            <td>13882424463</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141210</td>
            <td>吴耀东</td>
            <td>男</td>
            <td>18</td>
            <td>13882424464</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141211</td>
            <td>黄小桂</td>
            <td>女</td>
            <td>18</td>
            <td>13882424465</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141212</td>
            <td>陈永亮</td>
            <td>男</td>
            <td>18</td>
            <td>13882424466</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141213</td>
            <td>黄博</td>
            <td>男</td>
            <td>18</td>
            <td>13882424467</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141214</td>
            <td>张晓佳</td>
            <td>女</td>
            <td>18</td>
            <td>13882424468</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>20141215</td>
            <td>林德佳</td>
            <td>男</td>
            <td>18</td>
            <td>13882424469</td>
        </tr>
    </table>
    <input type="button" class="but1" value="全选" />
    <input type="button" class="but2" value="不选" />
    <input type="button" class="but3" value="反选" />
    <script>
        var but1 = document.querySelector('.but1');
        var but2 = document.querySelector('.but2');
        var but3 = document.querySelector('.but3');
        var trs = document.querySelector('table').querySelectorAll('tr');
        var inputs = document.querySelector('table').querySelectorAll('input');
        console.log(inputs);
        // 1.点击but1全选所有复选框
        but1.addEventListener('click', function() {
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = true;
                }
            })
            // 2.点击but2不选所有复选框
        but2.addEventListener('click', function() {
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = false;
                }

            })
            // 3.点击“反选”按钮，所有多选框选中的不被选中，未选中的被选中
        but3.addEventListener('click', function() {
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].checked) {
                        inputs[i].checked = false;
                    } else if (!inputs[i].checked) {
                        inputs[i].checked = true;
                    }
                }
            })
            // 4.鼠标移入到每行中加背景颜色，移出时恢复为原背景颜色
        for (var i = 0; i < trs.length; i++) {
            trs[i].addEventListener('mouseover', function() {
                this.style.backgroundColor = 'red';
            })
            trs[i].addEventListener('mouseout', function() {
                this.style.backgroundColor = '#d9ffdc';
            })
        }
    </script>
</body>

</html>